<template>
  <a-drawer placement="left" :closable="false" :visible.sync="show" @close="onClose" width="511px">
    <div class="drawer-content">
      <div class="content">
        <div class="title">
          <span>{{ title }}</span>
        </div>
        <div class="date">
          <div class="label">时间范围</div>
          <div class="box">
            <div class="btn-wrap">
              <div class="btn" :class="{'active': params.dateType === 2}" @click="onDateClick(2)">
                今天
                <img src="./image/btn-wrap-angle.png" alt="">
              </div>
              <div class="btn" :class="{'active': params.dateType === 4}" @click="onDateClick(4)">
                近一周
                <img src="./image/btn-wrap-angle.png" alt="">
              </div>
              <div class="btn" :class="{'active': params.dateType === 5}" @click="onDateClick(5)">
                近一月
                <img src="./image/btn-wrap-angle.png" alt="">
              </div>
            </div>
            <div class="date-wrap">
              <a-range-picker @change="onDateChange" @calendarChange="calendarPriceRangeChange" separator="——" size="large" dropdownClassName="daping-range-date" :disabled-date="disabledDate">
                <a-icon slot="suffixIcon" type="calendar"/>
              </a-range-picker>
            </div>
          </div>
        </div>
        <div class="area">
          <div class="label">行政区划</div>
          <div class="box">
            <div class="city-wrap">长春市</div>
            <a-select id="area-select" class="area-wrap" v-model="params.xzqh" dropdownClassName="area-select-dropdown">
              <a-select-option v-for="(item, index) in areaList" :key="index" :value="item.value">
                {{item.name}}
              </a-select-option>
            </a-select>
          </div>
        </div>
        <div class="option-check">
          <div class="option-check-title"><span></span>统计指标</div>
          <GeminiScrollbar>
            <div class="option-list">
              <a-checkbox-group v-model="params.checkedList" @change="onCheckedChange" v-if="showDrag">
                <draggable v-model="dragOptionList" @end="onDragEnd">
                  <a-checkbox v-for="(item,index) in dragOptionList" :value="item.value" :checked="item.checked"
                    :key="index">{{item.label}}</a-checkbox>
                </draggable>
              </a-checkbox-group>
            </div>
          </GeminiScrollbar>
          
        </div>
        <div class="btn-wrap">
          <div class="cancel" @click="onClose">取消</div>
          <div class="ok" @click="onOptionChange">确定</div>
        </div>
      </div>
      <div class="close" @click="onClose">
        <img src="../../image/index/left-sider-angle.png">
      </div>
    </div>
  </a-drawer>
</template>

<script>
  import draggable from 'vuedraggable'
  import dragOtion from './config/options.js'
  import moment from 'moment'
  import {
    getXzqhList
  } from '../../api/index.js'
  export default {
    components: {
      draggable
    },
    model: {
      prop: 'visible',
      event: 'change'
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      title: String
    },
    watch: {
      visible: function(res) {
        this.show = res
      },
    },
    data() {
      return {
        showDrag: true,
        show: false,
        areaList: [],
        dragOptionList: [],
        params: {
          dateType: 2, // 0:自定义 1：昨天 2：今天 3：近三天 4：近七天 5：近一个月 6：近一个季度 7：近一年	query	false
          startDate: '',
          endDate: '',
          xzqh: '',
          checkedList: []
        },
        xzqhs: '吉林省长春市',  //默认行政区划
        selectPriceDate: '',
        offsetDays: 86400000 * 365, //最多选择365天【一年】
      }
    },
    computed: {
      
    },
    mounted() {
      this.getCheckedCache()
      this.getXzqh()
    },
    methods: {
      //选择开始时间/结束时间
      calendarPriceRangeChange(date) {
        this.selectPriceDate = date[0]
      },
      //根据选择的开始时间/结束时间，动态渲染要禁用的日期
      disabledDate(current) {
        if (this.selectPriceDate) {
          let selectV = moment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
          return (
            current > moment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD') ||
            current < moment(new Date(selectV - 1), 'YYYY-MM-DD')
          )
        } else {
          return false
        }
      },
      
      
      getXzqh() {
        getXzqhList().then(res => {
          const {
            result
          } = res
          let list = [{
            name: '全部',
            value: ''
          }]
          result.map(item => {
            list.push({
              name: item.areaName,
              value: item.areaName
            })
          })
          this.areaList = list
        })
      },


      onDateClick(dateType) {
        this.params.dateType = dateType
      },
      onDateChange(date) {
        this.selectPriceDate = date[0]
        if (date.length > 0) {
          this.params.dateType = 0
          this.params.startDate = date[0].format('YYYY-MM-DD')
          this.params.endDate = date[1].format('YYYY-MM-DD')
        } else {
          this.params.dateType = 2
          this.params.startDate = ''
          this.params.endDate = ''
        }
        this.selectPriceDate = ''
      },
      onDragEnd() {
        // this.sortTop6()
        // this.setChecked()
        this.showDrag = false
        this.$nextTick(() => {
          this.showDrag = true
        })
      },
      sortTop6() {
        const top6 = this.dragOptionList.filter((item, index) => {
          return index < 6
        })
        const dragOptionList = JSON.parse(JSON.stringify(this.dragOptionList))
        top6.map((item, index) => {
          if (item.label === '案件统计') {
            if (index !== 0 || index !== 5) {
              if (top6[0].label !== '预警劝阻概览') {
                dragOptionList.splice(index, 1)
                dragOptionList.unshift(item)
              } else if (top6[0].label === '预警劝阻概览') {
                dragOptionList.splice(index, 1)
                dragOptionList.splice(5, 0, item)
              }
            }
          } else if (item.label === '预警劝阻概览') {
            if (index !== 0 || index !== 5) {
              if (top6[0].label !== '案件统计') {
                dragOptionList.splice(index, 1)
                dragOptionList.unshift(item)
              } else if (top6[0].label === '案件统计') {
                dragOptionList.splice(index, 1)
                dragOptionList.splice(5, 0, item)
              }
            }
          }
        })
        this.dragOptionList = dragOptionList
      },
      onCheckedChange(item) {
        if (this.params.checkedList.length > 6) {
          this.params.checkedList.pop()
          this.$message.error('只能勾选六个指标生成图表')
        } else {
          this.sortDragList()
        }
      },
      sortDragList() {
        const checked = this.getChecked()
        const dragOptionList = JSON.parse(JSON.stringify(this.dragOptionList))
        let newList = []
        let sortList = []
        dragOptionList.map((item, index) => {
          checked.map((child) => {
            if(child === item.label) {
              newList.push(item)
            }
          })
        })
        // this.dragOptionList = newList.concat(sortList)
      },
      
      onOptionChange() {
        const checkedList = this.params.checkedList
        if (checkedList.length === 6) {
          
          const params = JSON.parse(JSON.stringify(this.params))
          params.checkedList = checkedList
          this.setCheckedCache()
          this.$emit('change', params)
          this.onClose()
        } else if (checkedList.length > 6) {
          this.$message.error('只能勾选六个指标生成图表')
        } else if (checkedList.length < 6) {
          this.$message.error('请勾选六个指标生成图表')
        }
      },
      setCheckedCache() {
        localStorage.setItem('dragOtion', JSON.stringify(this.dragOptionList))
        localStorage.setItem('checkedList', JSON.stringify(this.params.checkedList))
      },
      getCheckedCache() {
        const dragOtionCache = localStorage.getItem('dragOtion')
        const checkedListCache = localStorage.getItem('checkedList')
        if (dragOtionCache && checkedListCache) {
          this.dragOptionList = JSON.parse(dragOtionCache)
          this.params.checkedList = JSON.parse(checkedListCache)
        } else {
          this.dragOptionList = dragOtion
          this.setChecked()
        }
      },
      setChecked() {
        let checked = []
        this.dragOptionList.map((item, index) => {
          if (index < 6) {
            checked.push(item.value)
          }
        })
        this.params.checkedList = checked
      },
      getChecked() {
        // return this.dragOptionList.filter((item, index) => {
        //   return index < 6
        // })
        return this.params.checkedList
      },
      getOption() {
        const params = JSON.parse(JSON.stringify(this.params))
        let xzqh = params.xzqh
        let xzqhs = this.xzqhs + xzqh
        params.xzqh = xzqhs
        params.checkedList = this.params.checkedList
        return params
      },
      onClose() {
        this.$emit('update:visible', false)
      },

    }
  }
</script>

<style lang="less" scoped>
  @font-face {
    font-family: 'pang';
    src: url(../../font/PangMenZhengDaoBiaoTiTi-1.ttf);
  }

  .ant-drawer {
    z-index: 9;

    ::v-deep .ant-drawer-content {
      background-color: transparent;
    }

    ::v-deep .ant-drawer-body {
      height: 100%;
      padding-top: 10.185vh;
      padding-bottom: 20px;
      padding-left: 0;
      padding-right: 0;

      .drawer-content {
        height: 100%;
        // background-color: pink;
        display: flex;
        flex-flow: row;
        align-items: center;

        .content {
          width: 483px;
          height: 100%;
          background-image: url(image/drawer-bg.png);
          background-size: 100% 100%;
          display: flex;
          flex-flow: column;
          // border: 1px solid #fff;
          // background-color: rgba(7, 38, 46, .9);
          color: #fff;
          
          .gm-scrollbar.-vertical {
              width: 15px;
              background-color: rgba(6, 31, 39, 1.0);
          }
          
          /* horizontal scrollbar track */
          .gm-scrollbar.-horizontal {
              background-color: transparent;
          }
          
          /* scrollbar thumb */
          .gm-scrollbar .thumb {
            background-color: rgba(0, 174, 255, .6);
          }
          .gm-scrollbar .thumb:hover {
              background-color: rgba(0, 174, 255, 1);
          }

          // ::-webkit-scrollbar {
          //   width: 15px;
          // }

          // ::-webkit-scrollbar-thumb {
          //   background-color: rgba(2, 134, 169, 1.0);
          // }

          // ::-webkit-scrollbar-track-piece {
          //   background-color: rgba(6, 31, 39, 1.0);
          // }

          .title {
            font-family: 'pang';
            width: 441px;
            height: 31px;
            margin: 0 auto;
            margin-top: 24px;
            background-image: url(image/title.png);
            background-size: 100% 100%;
            position: relative;
            color: #fff;

            span {
              position: absolute;
              left: 40px;
              top: -9px;
              font-size: 20px;
            }
          }

          .date,
          .area {
            padding-left: 20px;
            font-size: 14px;
            display: flex;
            flex-flow: row;
            margin-top: 20px;

            .label {
              margin-right: 23px;
              word-break: keep-all;
            }

            .box {
              flex: 1;
              padding-right: 20px;

              .btn-wrap {
                display: flex;
                justify-content: space-between;
                margin-bottom: 20px;
                height: unset;
                color: #00AEFF;

                .btn {
                  width: 100px;
                  height: 40px;
                  background-image: url(./image/btn-wrap.png);
                  background-size: 100% 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  position: relative;
                  cursor: pointer;
                  border: 0;

                  img {
                    position: absolute;
                    bottom: 0;
                    opacity: .4;
                  }
                }

                .active {
                  background-image: url(./image/btn-wrap-active.png);
                  color: #fff;
                }
              }

              .date-wrap {
                width: 360px;
                // background-color: rgba(0, 203, 255, .2);
                background-image: url(image/date-wrap.png);
                background-size: 100% 100%;

                .ant-calendar-range-picker-input {
                  &::placeholder {
                    color: #00AEFF;
                  }
                }

                .ant-calendar-picker-icon {
                  color: #00AEFF !important;
                }

                .ant-calendar-picker {
                  width: 100%;
                }

                .ant-calendar-range-picker-separator {
                  color: #00AEFF;
                }

                .ant-input {
                  background-color: transparent;
                  border: 0;
                  color: #fff;
                }

                .ant-calendar-picker-icon {
                  color: #fff;
                }
              }

              .city-wrap,
              .area-wrap {
                width: 160px;
                height: 40px;
                background-image: url(./image/select-wrap.png);
                background-size: 100% 100%;
                display: flex;
                justify-content: center;
                align-items: center;

              }
            }
          }

          // .date{
          //   height: 140px;
          // }
          .area {
            height: 40px;

            .box {
              display: flex;
              justify-content: space-between;
            }
          }

          .btn-wrap {
            height: 80px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            color: #fff;

            >div {
              width: 80px;
              height: 40px;
              border: 1px solid #00AEFF;
              text-align: center;
              line-height: 40px;
              margin-right: 30px;
              cursor: pointer;

              &:active {
                opacity: .7;
              }
            }

            .ok {
              
              background: rgba(0, 174, 255, 0.5);
            }
          }

          .option-check {
            margin-top: 32px;
            overflow-y: hidden;
            // height: calc(100% - 40px - 100px - 31px - 64px - 32px);
            flex: 1;

            .option-check-title {
              font-family: 'pang';
              padding-left: 20px;
              display: flex;
              align-items: center;
              font-size: 20px;
              margin-bottom: 14px;

              span {
                display: inline-block;
                width: 4px;
                height: 20px;
                background-color: #00AEFF;
                margin-right: 10px;
              }
            }

            .option-list {
              height: calc(100% - 14px - 30px);
              // overflow-y: auto;
              padding-left: 20px;

              .ant-checkbox-group {
                width: 100%;
                >div{
                  padding-bottom: 50px;
                }
                .ant-checkbox-wrapper {
                  height: 50px;
                  border-bottom: 1px solid rgba(0, 174, 255, .3);
                  color: #fff;
                  display: flex;
                  align-items: center;
                  margin-left: 0;

                  &:first-child {
                    border-top: 1px solid rgba(0, 174, 255, .3);
                  }

                  .ant-checkbox-checked .ant-checkbox-inner {
                    background-color: rgba(0, 174, 255, 1);
                  }

                  .ant-checkbox-inner {
                    background-color: rgba(0, 174, 255, .2);
                    border: 1px solid rgba(0, 174, 255, 1);

                    &::after {
                      border-color: #000;
                    }
                  }
                }
              }
            }
          }
        }

        .close {
          flex: 1;
          height: 450px;
          background-image: url(../../image/index/left-sider.png);
          background-size: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          padding-bottom: 40px;
          cursor: pointer;

          img {
            transform: rotate(180deg);
          }
        }
      }
    }


  }

  // #area-dropdown {
  //   background-color: transparent;
  //   border: 1px solid #00AEFF;

  //   ::v-deep .ant-dropdown-menu-item {
  //     color: #fff;

  //     &:hover {
  //       background-color: rgba(0, 203, 255, .4) !important;
  //     }
  //   }
  // }
</style>
<style lang="less">
  .area-select-dropdown {
    background-color: #040C1F;

    li {
      color: #fff;

      &:hover {
        color: #333;
      }
    }

    .ant-select-dropdown-menu-item-selected {
      background-color: #00AEFF;
    }
  }

  #area-select {
    .ant-select-selection {
      width: 100%;
      background-color: transparent;
      border: 0;
      color: #fff;
      box-shadow: unset !important;

      .ant-select-arrow {
        background-image: url(./image/select-down-icon.png);
        background-size: 100% 100%;
        width: 23px;
        height: 12px;

        i {
          display: none;
        }
      }
    }
  }

  .daping-range-date {
    border: 1px solid #00AEFF;
    background: rgba(4, 12, 31, 0.9);
    // background-color: rgba(0, 20, 26, .9);
    box-shadow: 0 0 5px #00AEFF;
    top: 280px !important;

    // border-radius: 4px;
    .ant-calendar-input-wrap {
      display: none;
    }

    .ant-calendar-date {
      color: #fff;
    }

    .ant-calendar {
      background-color: transparent;
      margin: 0;
      border: 0;
    }

    .ant-calendar-next-month-btn-day {
      .ant-calendar-date {
        color: rgba(255, 255, 255, .3) !important;
      }
    }

    .ant-calendar-column-header {
      color: #fff;
    }

    .ant-calendar-input {
      background-color: transparent !important;
      border: 0 !important;
    }

    .ant-calendar-year-select,
    .ant-calendar-month-select {
      color: #fff !important;
    }

    .ant-calendar-next-year-btn,
    .ant-calendar-next-month-btn {
      &:hover {

        &::before,
        &::after {
          border-color: #fff !important;
        }
      }
    }

    .ant-calendar-month-panel-header,
    .ant-calendar-month-panel-body,
    .ant-calendar-year-panel-header,
    .ant-calendar-year-panel-body {
      background-color: rgba(0, 20, 26, .9);
    }
    
    .ant-calendar-disabled-cell .ant-calendar-date{
      background-color: #eee;
      color: #ccc!important;
    }

    .ant-calendar-month-panel-year-select-content,
    .ant-calendar-year-panel-decade-select-content,
    .ant-calendar-month-panel-month,
    .ant-calendar-year-panel-year {
      color: #fff;
    }

    .ant-calendar-in-range-cell {
      background-color: rgba(0, 203, 255, .4) !important;
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      margin: 1px 0;

      &::before {
        background-color: unset !important;
      }
    }

    .ant-calendar-selected-start-date {
      background-color: #1890ff;
      border-radius: 45% 0 0 45%;
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      box-sizing: border-box;

      .ant-calendar-date {
        border-radius: 45% 0 0 45%;
      }
    }

    .ant-calendar-selected-end-date {
      background-color: #1890ff;
      border-radius: 0 45% 45% 0;
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      box-sizing: border-box;

      .ant-calendar-date {
        border-radius: 0 45% 45% 0;
      }
    }

    .ant-calendar-cell {
      .ant-calendar-date {
        &:hover {
          color: #000;
        }
      }
    }

    .ant-calendar-range-part {
      padding: 0 30px;
    }

    .ant-calendar-range-left {
      padding-right: 22px !important;
    }

    .ant-calendar-range-right {
      padding-left: 22px !important;
    }

    .ant-calendar-prev-year-btn {
      left: -25px;

      &:hover {
        &:after {
          border-color: #fff;
        }

        &:before {
          border-color: #fff;
        }
      }
    }

    .ant-calendar-prev-month-btn {
      left: 0;
      color: #fff;

      &:hover {
        &:after {
          border-color: #fff;
        }

        &:before {
          border-color: #fff;
        }
      }
    }

    .ant-calendar-next-year-btn {
      right: -25px;

      &:hover {
        &:after {
          border-color: #fff;
        }

        &:before {
          border-color: #fff;
        }
      }
    }

    .ant-calendar-next-month-btn {
      right: 0;

      &:hover {
        &:after {
          border-color: #fff;
        }

        &:before {
          border-color: #fff;
        }
      }
    }
  }
</style>
